<template>
  <div>
    <a-tabs default-active-key="1">
      <a-tab-pane key="1">
        <span slot="tab">
          <a-icon type="user" /> 
          账户配置
        </span>
        <!-- Tab1 内容 -->
        <div class="stdRow pd-B of-V" style="height:100%;">
            <!-- 表单控件 -->
            <a-form :form="form" @submit="handleSubmit" layout="inline">

                <div class="config-inputGroup">
                    <a-form-item label="用户名">
                        <a-input v-decorator="['note', { rules: [{message: 'Please input your note!' }] }]" />
                    </a-form-item>
                    <a-form-item label="企业信息">
                        <a-input v-decorator="['note', { rules: [{message: 'Please input your note!' }] }]" />
                    </a-form-item>
                    <a-form-item label="单位">
                        <a-input v-decorator="['note', { rules: [{message: 'Please input your note!' }] }]" />
                    </a-form-item>
                    <a-form-item label="数量">
                        <a-input v-decorator="['note', { rules: [{message: 'Please input your note!' }] }]" />
                    </a-form-item>
                    <a-form-item label="上次更新日期">
                        <a-input v-decorator="['note', { rules: [{message: 'Please input your note!' }] }]" />
                    </a-form-item>
                </div>

<!--                 <div class="stdRow bd-B" style="margin: 5px 0px;"></div>
 -->
                <div class="config-inputGroup">
                    <a-form-item label="产品描述">
                        <a-input v-decorator="['note', { rules: [{message: 'Please input your note!' }] }]" />
                    </a-form-item>
                    <a-form-item label="规格型号">
                        <a-input v-decorator="['note', { rules: [{message: 'Please input your note!' }] }]" />
                    </a-form-item>
                    <a-form-item label="规格型号">
                        <a-input v-decorator="['note', { rules: [{message: 'Please input your note!' }] }]" />
                    </a-form-item>
                </div>

<!--                 <div class="stdRow">
                    <a-form-item>
                        <a-button type="primary" html-type="submit">
                            提交修改
                        </a-button>
                    </a-form-item>
                </div> -->

            </a-form>
        </div>
        <!-- Tab1 内容结束 -->


      </a-tab-pane>
      <a-tab-pane key="2">
        <span slot="tab">
          <a-icon type="branches" />
          树状结构配置
        </span>
        <!-- Tab1 内容 -->
        <div class="stdRow pd-B of-V" style="height:100%;">
            <!-- 表单控件 -->
            <a-form :form="form" @submit="handleSubmit" layout="inline">

                <div class="config-inputGroup">
                    <a-form-item label="用户名">
                        <a-input v-decorator="['note', { rules: [{message: 'Please input your note!' }] }]" />
                    </a-form-item>
                    <a-form-item label="企业信息">
                        <a-input v-decorator="['note', { rules: [{message: 'Please input your note!' }] }]" />
                    </a-form-item>
                    <a-form-item label="单位">
                        <a-input v-decorator="['note', { rules: [{message: 'Please input your note!' }] }]" />
                    </a-form-item>
                    <a-form-item label="数量">
                        <a-input v-decorator="['note', { rules: [{message: 'Please input your note!' }] }]" />
                    </a-form-item>
                    <a-form-item label="上次更新日期">
                        <a-input v-decorator="['note', { rules: [{message: 'Please input your note!' }] }]" />
                    </a-form-item>
                </div>

<!--                 <div class="stdRow bd-B" style="margin: 5px 0px;"></div>
 -->
                <div class="config-inputGroup">
                    <a-form-item label="产品描述">
                        <a-input v-decorator="['note', { rules: [{message: 'Please input your note!' }] }]" />
                    </a-form-item>
                    <a-form-item label="规格型号">
                        <a-input v-decorator="['note', { rules: [{message: 'Please input your note!' }] }]" />
                    </a-form-item>
                    <a-form-item label="规格型号">
                        <a-input v-decorator="['note', { rules: [{message: 'Please input your note!' }] }]" />
                    </a-form-item>
                </div>

<!--                 <div class="stdRow">
                    <a-form-item>
                        <a-button type="primary" html-type="submit">
                            提交修改
                        </a-button>
                    </a-form-item>
                </div> -->

            </a-form>
        </div>
        <!-- Tab1 内容结束 -->
      </a-tab-pane>
      <a-tab-pane key="3">
        <span slot="tab">
          <a-icon type="api" />
          API配置
        </span>
        <!-- Tab1 内容 -->
        <div class="stdRow pd-B of-V" style="height:100%;">
            <!-- 表单控件 -->
            <a-form :form="form" @submit="handleSubmit" layout="inline">

                <div class="config-inputGroup">
                    <a-form-item label="用户名">
                        <a-input v-decorator="['note', { rules: [{message: 'Please input your note!' }] }]" />
                    </a-form-item>
                    <a-form-item label="企业信息">
                        <a-input v-decorator="['note', { rules: [{message: 'Please input your note!' }] }]" />
                    </a-form-item>
                </div>

<!--                 <div class="stdRow bd-B" style="margin: 5px 0px;"></div>
 -->
                <div class="config-inputGroup">
                    <a-form-item label="产品描述">
                        <a-input v-decorator="['note', { rules: [{message: 'Please input your note!' }] }]" />
                    </a-form-item>
                    <a-form-item label="规格型号">
                        <a-input v-decorator="['note', { rules: [{message: 'Please input your note!' }] }]" />
                    </a-form-item>
                    <a-form-item label="规格型号">
                        <a-input v-decorator="['note', { rules: [{message: 'Please input your note!' }] }]" />
                    </a-form-item>
                </div>

                <div class="stdRow">
                    <a-form-item>
                        <a-button type="primary" html-type="submit">
                            提交修改
                        </a-button>
                    </a-form-item>
                </div>

            </a-form>
        </div>
        <!-- Tab1 内容结束 -->
      </a-tab-pane>
    </a-tabs>
    </div>
</template>

<script>
export default {
    data() {
        return {

            // 表单控件
            form: this.$form.createForm(this, { name: 'coordinated' }),

        };
    },
    methods: {

        // 表单控件
        handleSubmit(e) {
            e.preventDefault();
            this.form.validateFields((err, values) => {
                if (!err) {
                    console.log('Received values of form: ', values);
                }
            });
        },

    },
}
</script>